fashion-ssr-vue3/pages/categories/[slug].vue

<script lang='ts' setup>
import { useCommonStore } from '@/stores/modules/common'
import { Api } from '@/api/model/url'

const route = useRoute()
const commonStore = useCommonStore()
const list = ref<any>([])
const config = useRuntimeConfig()
const { apiBaseSiteUrl } = config.public

const slug = route.params.slug
const { data: res } = await useAsyncData(
  'category-detail',
  () =>
    $fetch(`${apiBaseSiteUrl}${Api.CategoryDetail}`, { params: { slug } }),
)
const seoData = res.value?.result
const { data: res2 } = await useAsyncData(
  'category-catalogue-list',
  () =>
    $fetch(`${apiBaseSiteUrl}${Api.CategoryCatalogueList}`, { params: { slug } }),
)
list.value = res2.value?.result?.records || []

const { openLoginAndDownloadModal } = useLoginAndDownLoadModal()
async function clickLoginAndDownload(item: any) {
  try {
    commonStore.setDownloadCatalog(item)
    const { status } = await openLoginAndDownloadModal()
    if (status)
      location.reload()
  }
  catch (error) {
    console.log(error)
  }
}
const firstTitle = computed(() => {
  return seoData?.contentTitle ? handleTitle(seoData.contentTitle, 1) : ''
})
const secondTitle = computed(() => {
  return seoData?.contentTitle ? handleTitle(seoData.contentTitle, 2) : ''
})

function handleTitle(title: string | undefined, position: number) {
  if (!title)
    return ''
  // 先判断标题中是否带有&，获取第一个&之前的数据和之后的数据
  let firstPart = ''
  let secondPart = ''
  const index = title.indexOf('&')
  if (index !== -1) {
    firstPart = title.slice(0, index).trim()
    secondPart = title.slice(index + 1).trim()
  }
  else {
    // 如果没有&，返回第一个空格之前的数据和之后的数据
    const spaceIndex = title.indexOf(' ')
    if (spaceIndex !== -1) {
      firstPart = title.slice(0, spaceIndex).trim()
      secondPart = title.slice(spaceIndex + 1).trim()
    }
  }
  return position === 1 ? firstPart : secondPart || ''
}
</script>

<template>
  <div>
    <div class=" bg-#0F0820 header">
      <div class=" w-1200-auto pos-relative text-center flex items-center justify-start h-600px  bg-no-repeat bg-center">
        <h1 class="text-58px fw-800 text-#fff ls-2 custom-title-font">
          <span class="flex items-center">
            {{ firstTitle }}<svgo-flower class="w-44px h-44px !text-#FFFF66 ml-20px" />
          </span>
          <span class="flex items-center">
            <svgo-star-blue class="w-44px h-44px text-#1AC18E mr-20px" /> {{ secondTitle }}
          </span>
        </h1>
        <div class="pos-absolute right-0 bottom-76px w-426px h-340px header-img-bg flex justify-center items-center">
          <img :src="seoData.bannerImg" alt="" class="w-full h-390px object-contain mb-40px">
        </div>
      </div>
    </div>
    <div class="py-120px w-1200-auto text-center">
      <h2 class="text-36px fw-800 text-#333 !mb-20px custom-title-font">
        Our Latest Product <span class="custom-title-bg04">Catalogs</span>
      </h2>
      <div class="text-#999 text-22px mb-40px">
        Discover bestsellers and fresh arrivals tailored to your niche.
      </div>
      <div class="grid grid-cols-2 gap-64px text-left">
        <div v-for="item in list" :key="item.id">
          <business-categories-comp-item :item="item" @select="clickLoginAndDownload" />
        </div>
      </div>
    </div>
    <common-block-catalogs />
    <common-block-blog class="!pb-0" />
    <AppFooter />
  </div>
</template>

<style lang='less' scoped>
.header{
  background-image: url('@/assets/images/catalogue_bg.png');
  background-position: center center;
  background-size: cover;
  .header-img-bg{
    background-image: url('@/assets/images/catalogue_bg_img.png');
    background-size: cover;
    background-position: center;
  }
}
</style>